<template>
  <div class="table_con">
    <tableComponents
      :isShow="false"
      @toAdd="dialogFormVisible = true"
      :isHaveExport="false"
      :isHavePagination="false"
      :isShowBottom="false"
    >
      <template v-slot:table>
        <el-table
          :data="data"
          :sort-change="chanegTab"
          v-loading="loading"
          style="width: 100%; margin-bottom: 20px"
          border
          row-key="id"
        >
          <el-table-column label="分类名称" sortable="custom" min-width="200">
            <template slot-scope="scope">
              <div class="tree_yiji">
                {{ scope.row.title }}
                <div class="three_title">
                  {{ scope.row.three }}级栏目(下属分类{{ scope.row.length }}个)
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="排序"
            sortable
            :sort-method="sorta"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <div>
                <el-input
                  @change="sortNew(scope.$index, scope.row)"
                  v-enterNumber
                  v-model="scope.row.sort"
                  autocomplete="off"
                  size="small"
                ></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否显示" min-width="100" align="center">
            <template slot-scope="scope">
              <el-switch
                class="zdySwith"
                :width="82"
                v-model="scope.row.show"
                active-color="#1aad19"
                inactive-color="#ffffff"
                active-text="已开启"
                inactive-text="已关闭"
                active-value="1"
                @change="gethandSwitch($event, scope.row.id)"
                inactive-value="0"
              ></el-switch>
            </template>
          </el-table-column>

          <!-- <el-table-column label="创建时间" min-width="100" align="center">
            <template slot-scope="scope">{{scope.row.created_time | getTimeFormat}}</template>
          </el-table-column>-->

          <el-table-column label="操作" min-width="100" align="center">
            <template slot-scope="scope">
              <el-button
                :loading="$store.state.isLoading"
                type="success"
                size="mini"
                @click="getOrderInfo(scope.row)"
                v-if="iskdlwnjk"
                >查看订单</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                type="primary"
                size="mini"
                @click="updateMenuLi(scope.row)"
                >编辑</el-button
              >
              <el-button
                :loading="$store.state.isLoading"
                size="mini"
                @click="deleteMenu(scope.row.id)"
                type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </tableComponents>

    <el-dialog
      :close-on-click-modal="false"
      title="SKU"
      width="800px"
      @close="closeDio"
      class="tl size_13"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item
          label="SKU标题"
          prop="title"
          :label-width="formLabelWidth"
        >
          <el-col :span="12">
            <el-input
              v-model="form.title"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item
          label="上级栏目"
          :label-width="formLabelWidth"
          prop="parent_id"
        >
          <el-col :span="12" class="tl">
            <el-cascader
              :options="option"
              :props="optionProps"
              :show-all-levels="false"
              v-model="op"
              size="small"
              change-on-select
              style="width: 100%"
              :placeholder="placeText"
              @change="handleItemChange"
            ></el-cascader>
          </el-col>
        </el-form-item>

        <el-form-item label="规格图片上传" :label-width="formLabelWidth">
          <el-col :span="12" class="tl">
            <el-radio-group v-model="form.is_pic">
              <el-radio label="1">开</el-radio>
              <el-radio label="0">关</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>

        <el-form-item label="SKU描述" :label-width="formLabelWidth">
          <el-col :span="12">
            <el-input
              v-model="form.description"
              autocomplete="off"
              size="small"
            ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button
            :loading="$store.state.isLoading"
            type="primary"
            @click="addMenu('form')"
            >立即提交</el-button
          >
          <el-button
            :loading="$store.state.isLoading"
            @click="resetForm('form')"
            >重 置</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: this.$store.state.sku || [],
      xy_down: 0,
      xy_down_text: "全部隐藏",
      hackReset: true,
      add: "",
      op: [],
      option: this.$store.state.sku || [],
      optionProps: {
        value: "id",
        label: "title",
        children: "z",
      },
      dialogFormVisible: false,
      form: {
        title: "",
        parent_id: "0",
        description: "",
        is_pic: "0",
      },
      rules: {
        title: [
          { required: true, message: "请输入商品类别名称", trigger: "blur" },
        ],
        parent_id: [
          { required: true, message: "请添加栏目", trigger: "change" },
        ],
      },
      formLabelWidth: "120px",

      placeText: "请选择栏目添加",
      loading: false,
      iskdlwnjk: false,
    };
  },
  mounted() {
    var kdlwnjk =
      JSON.parse(localStorage.getItem("limit")).kdlwnjk &&
      JSON.parse(localStorage.getItem("limit")).kdlwnjk.is_open
        ? JSON.parse(localStorage.getItem("limit")).kdlwnjk.is_open
        : 0 || 0;
    kdlwnjk == 1 ? (this.iskdlwnjk = true) : (this.iskdlwnjk = false);
  },
  computed: {
    getMenuList(obj) {
      return this.$store.state.sku || [];
    },
  },
  watch: {
    getMenuList(obj) {
      this.data = obj || [];
      this.option = obj || [];
    },
  },
  created() {
    this.getSkuList();
  },
  methods: {
    getOrderInfo(val) {
      let routeData = this.$router.resolve({
        path: "/index/order",
        query: { sku_id: val.id },
      });
      window.open(routeData.href, "_blank");
    },
    chanegTab() {},
    sorta(a, b) {
      return b - a;
    },
    sortNew(index, row) {
      var params = {};
      params.id = row.id;
      params.sort = row.sort;
      this.$api.getShops.sortInputSku(params).then((res) => {
        if (res.data.code == 200) {
          this.sorta();
        }
      });
    },
    closeDio() {
      this.dialogFormVisible = false;
      this.form = {
        title: "",
        parent_id: "0",
        description: "",
      };
      this.op = [];
    },
    getSkuList() {
      this.loading = true;

      this.$store.dispatch("getSkuListTree", new Date());

      this.loading = false;
    },
    addMenu(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false;
          var params = {};
          params = this.form;
          if (params.id) {
            this.$api.getShops.updateSku(params).then((res) => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "修改成功" }); //成功弹出框
                this.$store.dispatch("getSkuListTree", new Date());
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          } else {
            this.$api.getShops.addSku(params).then((res) => {
              if (
                res.data.code == 200 &&
                res.data.status == 1 &&
                res.data.result
              ) {
                this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
                this.getSkuList();
              } else {
                this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    handleItemChange(val) {
      this.form.parent_id = val[val.length - 1];
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    deleteMenu(id) {
      this.$swal({
        title: "您确定要删除这条信息吗",
        text: "删除后将无法恢复，请谨慎操作！",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "是的，我要删除",
        cancelButtonText: "容我三思",
      }).then((willDelete) => {
        if (willDelete.value) {
          var data = { id };
          this.$api.getShops.delSku(data).then((res) => {
            if (res.status == 200 && res.data.code == 400) {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            } else if (res.data.code == 200) {
              this.$swal("删除成功！", "您已经删除了这条信息。", "success");
              this.getSkuList();
              //刷新页面。。。
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
            }
          });
        }
      });
    },
    updateMenuLi(row) {
      this.op = [];
      this.dialogFormVisible = true;
      this.$api.getShops.findSku({ id: row.id }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.form = res.data.result;
          this.op = res.data.result.up_id.split("@");
          this.getSkuList();
        }
      });
    },
    getSortData(da) {
      this.$api.getShops.sortSku(da).then((res) => {
        this.getSkuList();
      });
    },
    toggle() {
      this.xy_down += 1;
      if (this.xy_down % 2 == 0) {
        this.xy_down_text = "全部隐藏";
      } else {
        this.xy_down_text = "全部显示";
      }
    },

    gethandSwitch(show, id) {
      var params = {};
      params.id = id;
      params.show = show;
      this.$api.getShops.updateSku(params).then((res) => {
        if (res.data.code != 200) {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          this.getSkuList();
        }
      });
    },
  },
};
</script>

